<template>
  <div class="messageSet-box">
    <el-row :gutter="20">
      <el-col :span="16">
        <NewCard title="消息模板" :border="false">
            <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                @row-click="rowClick"
                style="width: 100%">
                <el-table-column type="index" label="编号" width="50"></el-table-column>
                <el-table-column property="title" label="标题" width="120"></el-table-column>
                <el-table-column property="content" label="内容"></el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageing.pageNum"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pageing.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageing.total">
                </el-pagination>
            </div>
        </NewCard>
      </el-col>
      <el-col :span="8">
        <NewCard :title="editOrAdd?'新增':'编辑'">
            <el-form ref="form" :model="editFrom" label-width="100px" label-position="left">
                <el-form-item label="消息标题">
                    <el-input v-model="editFrom.title" placeholder="请输入..."></el-input>
                </el-form-item>
                <el-form-item label="消息内容">
                    <el-input v-model="editFrom.content" type="textarea" placeholder="请输入..." rows="15"></el-input>
                </el-form-item>
            </el-form>
            <!-- <SubBtn>
                <template slot="btn">
                    <el-button round>删除</el-button>
                    <el-button round @click="clickAdd">新增</el-button>
                    <el-button type="primary" round>保存</el-button>
                </template>
            </SubBtn> -->
        </NewCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
import {getMessageTempListApi,addMessageTempApi} from "@/wss/newApi_3-24/base/messageTemp.js"
export default {
    name:'messageSet',
    components:{NewCard,SubBtn},
    data(){
        return{
            tableData:[],//消息模板
            //分页参数
            pageing: { pageNum: 1, pageSize: 10, total: 0 },
            editFrom:{},// 编辑的消息模板
            editOrAdd:true,//当前是false编辑还是true新增
        }
    },
    mounted(){
      this.getMessageTempList() // 查询消息模板
    },
    methods:{
      // 分页器
      handleSizeChange(val) {
        this.pageing.pageSize = val;
        this.getMessageTempList(); // 查询消息模板
      },
      handleCurrentChange(val) {
        this.pageing.pageNum = val;
        this.getMessageTempList(); // 查询消息模板
      },
      // 分页器 end

      // 查询消息模板
      async getMessageTempList(){
        let pageing = this.pageing
        let result = await getMessageTempListApi(pageing)
        if(result.code==200){
          this.tableData = result.rows
          this.pageing.total = result.total
        }
      },

      // 点击某一行
      rowClick(row, column, event){
        this.editOrAdd = false
        this.editFrom = row
      },

      // 点击新增按钮
      clickAdd(){
        this.editOrAdd = true
        this.editFrom = {
          title:'',
          content:'',
        }
      },

    },
}
</script>

<style scoped>
.messageSet-box{
    height: calc(100% - 60px);
}
.messageSet-box >>> .el-row,
.messageSet-box >>> .el-col{
    height: 100%;
}

.messageSet-box >>> .el-col .el-card{
    position: relative;
}

.messageSet-box >>> .el-card__body{
  height: 100%;
}
.messageSet-box >>> .el-card__body>div{
  height: 92%;
  overflow-y: auto;
}
.messageSet-box >>> .el-card__body>div::-webkit-scrollbar{
  width: 0;
}

/* 表格样式 */

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  padding: 11px 0;
  /* border-bottom: 0; */
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}
.pagination {
  margin-top: 20px;
  margin-bottom: 50px;
  text-align: center;
}

/* 编辑表单 */
.el-form >>> .el-form-item__label{
    color: #2e3f5e;
}
.el-form >>> .el-textarea__inner{
    font-family: Microsoft Yahei;
}

/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px!important;
  z-index: 99;
}
::v-deep .subBtn>.el-button{
  width: 100px;
  padding: 8px 0!important;
  font-size: 14px;
  color: #606E84;
}
::v-deep .subBtn>.el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
</style>